<template>
	<view class="page">
		<!-- 搜索 -->
		<view class="search-head">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<!--标题-->
			<view class="order-tab">
				<view class="tab">
					<text>{{option.name}}</text>
				</view>
			</view>
			<view class="more-icon" @click="onSearch">
				<view class="icon-list">
					<text class="iconfont icon-fadajing"></text>
				</view>
			</view>
		</view>
		
		<!-- 筛选 -->
		<view class="screen-info">
			<view class="screen-list">
				<view class="list">
					<text>名称/代码</text>
					<!--text class="iconfont icon-sanjiao icon_z"></text-->
				</view>
				<view class="list">
					<text>最新价</text>
					<!--text></text-->
				</view>
				<view class="list" @click="onNodeSort(sortType==1?2:1)">
					<text>涨跌幅</text>
					<view class="icon_j">
						<text class="iconfont icon-sanjiao up"></text>
						<text class="iconfont icon-sanjiao down"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
				:down="downOption"
				:up="upOption"
				:top="0">
				<view class="node-list">
					<view class="list-li" v-for="(item,index) in nodeList" @click="toDeails(item.code)" :key="index">
						<view class="item">
							<view class="title list">
								<text class="two-omit">{{item.name}}</text>
								<text class="min">{{item.code}}</text>
							</view>
							<view class="price list">
								<view class="retail-price">
									<text class="max" 
									:class="{'green':item.changepercent<0}">
									{{item.trade}}
									</text>
								</view>
							</view>
							<view class="applies list">
								<view class="tag"
								:class="{'green':item.changepercent<0}">
									<text>{{item.changepercent}}</text><text>%</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- tabbar -->
		<!--TabBar :tabBarShow="2"></TabBar-->
	</view>
</template>

<script>
	
	// 引入mescroll-mixins.js
	import Request from '@/js_sdk/luch-request/luch-request/index.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	var _self,loginRes;
	const http = new Request();
	export default {
		mixins: [MescrollMixin], // 使用mixin
		/*components:{
			TabBar,
		},*/
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {use:false},// 列表视图切换
				sortType : 0,
				option   : '',
				nodeList : '',
			}
		},
		onShow() {
			//this.nodeList = uni.getStorageSync('node'+this.option.node);
		},
		onLoad(params){
			loginRes = this.checkLogin();
			if(!loginRes){return;}
			this.token = loginRes[2];
			if(params.node){
				this.option = params;
				this.nodeList = uni.getStorageSync('node'+this.option.node);
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				this.getNode(this.option.node,1,40);
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() =>{
					this.mescroll.endByPage(10, 20);
				},2000)
			},
			/**
			 * 返回点击
			 */
			onBack(){
				//uni.reLaunch({url: '/pages/home/home'});
				uni.navigateBack();
			},
			/*搜索点击*/
			onSearch(){
				uni.navigateTo({url:'/pages/search/search'})
			},
			/*股票列表点击*/
			toDeails(code){
				uni.navigateTo({
					url: '/pages/MarketDetails/MarketDetails?code='+code,
					animationType: 'zoom-fade-out',
					animationDuration: 200
				})
			},
			onNodeSort(type){
				this.sortType = type;
				var nodeList = this.nodeList;
				nodeList.sort(function (a, b) {
					switch(type){
						case 1:
							return parseFloat(b.changepercent) - parseFloat(a.changepercent);//按照指定键值重新排序
							break;
						case 2:
							return parseFloat(a.changepercent) - parseFloat(b.changepercent);//按照指定键值重新排序
							break;
					}
				});
				this.nodeList = nodeList;
			},
			/*行业详情*/
			async getNode(node,page,num){
				this.sortType = 0;
				http.get('http://vip.stock.finance.sina.com.cn/quotes_service/api/json_v2.php/Market_Center.getHQNodeData?&sort=symbol&asc=1', {
				    params: {page: page, num: num, node: node}, /* 会加在url上 */
				    header: {'content-type' : "application/x-www-form-urlencoded"}, 
				    dataType: 'json',
				    custom: {auth: true},
				}).then(res => {
					var nodeList = res.data;
					console.log(nodeList);
					this.nodeList = nodeList;
					uni.setStorageSync('node'+node , nodeList);
				}).catch(err => {
					uni.showToast({title:"加载失败!",icon:"none"});
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	@import  'ClassNode.scss';
</style>
